<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<style>
			#list-shops{
				overflow: hidden;
			}
			.ZZHT-favo-shopl{
				width:167px;
			}
			.ZZHT-favo-shop {
			    width: 167px;
			    overflow: hidden;
			    float: left;
			    border: 1px solid #eee;
    			margin-right: 7px;
			    margin-bottom: 7px;
			}
			.ZZHT-favo-shopimg img{
				width:167px;
				max-width: 167px;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix">
						<b>商品收藏</b>
						<span class="user_bread fr">
        当前位置：<span>我的收藏</span>--<span>商品收藏</span>
						</span>
					</div>
					<div class="ZZHT-clear"></div>
					<div style="background: #fff;padding: 8px;">
						<div id="list-shops" v-if="tab.length>0">
							<div class="ZZHT-favo-shop" v-for="v in tab">
								<div class="ZZHT-favo-shopl" style="text-align: center;">
									<a :href='"../view/detail.html?goodsId="+v.goodsId' class="ZZHT-favo-shopimg">
										<img class="shopsImg2" :title="v.goodsName" v-if="v.goodsImg.substr(0,4)=='http'" :src='v.goodsImg' style="display: inline;">
										<img class="shopsImg2" :title="v.goodsName" v-else :src='"http://zzhtwl.oss-cn-qingdao.aliyuncs.com/"+v.goodsImg' style="display: inline;">
									</a>
									<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{v.goodsName}}</p>
									<p class="" style="color:red;border:none;">&yen;{{v.shopPrice}}</p>
										
									<!--<a :href='"../view/detail.html?goodsId="+v.goodsId' class="ZZHT-favo-shopa">查看详情</a>-->
									<a href="#none" @click="remove(v.goodsId)" class="ZZHT-favo-shopa" style="float:none;">取消关注</a>
								</div>
							</div>
						</div>
					</div>
					<div class="ZZHT-align-center empty_tab" style="padding-top: 50px;padding-bottom: 100px;">
						<img src="../plugin/userLib/img/pic_noshop.png">
					</div>
					<div id="pager" style="text-align: center;"></div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script type="text/javascript">
			var pages = 1;
			var pageNum = 1;
			
			$(function(){
				getList();
				initPage();
			})
			
			var vm = new Vue({
				el:'.ZZHT-content',
				data:{
					tab:[],
				},
				methods:{
					remove:function(id){
						layer.confirm('确认要取消收藏吗？',function(index){
							$.get(SURL + 'sktFavorites/delFavoritesShopGoods', {
								"favoriteType": 0,
								"targetId": id,
								"userId": localStorage.userId
							}, function(data, textStatus) {
								var json = data;
								if(json.messageCode == 200) {
									window.location.reload();
								} else {
									layer.msg(json.message, {
										icon: 2
									});
								}
							});
						})
					}
				}
			});
			
			function getList(){
				var data = {};
				data.userId = localStorage.userId;
				data.pageNum = pageNum;
				data.favoriteType = 0;
				$.ajax({ //获取列表
					type: "get",
					url: SURL + "sktFavorites/selectShopGoods",
					data: data,
					timeout: 5000,
					async:false,
					dataType: 'json',
					success: function(res) {
						$('#loading').hide();
						console.log(res);
						if(res.messageCode == 200) {
							pages = res.page;
							if(res.entity.length > 0) {
								$('.empty_tab').hide();
							} else {
								$('.empty_tab').show();
							}
							vm.tab = res.entity;
						} else {
							layer.msg(res.message);
						}
					},
					error: function(textStatus) {
						console.error(textStatus);
					},
					complete: function(XMLHttpRequest, status) {
						if(status == 'timeout') {
							layer.msg("网络超时，请刷新", function() {
								location.reload();
							})
						}
					}
				});
			}
		</script>
	</body>

</html>